<template>
  <div class="home">
    <!-- 局部加载 -->
    <MusicLaoding v-if="laoding" />
    <!-- 真正home -->
    <div v-else>
      <!-- 页面组件 -->
        <home-page></home-page>
      <!-- 自定义搜索 -->
      <my-show></my-show>
      <!-- <MusicSearch /> -->
      <!-- swiper  awesome vue自己组件库 轮播 -->
      <MusicSwiper :banners="banners" />
      <!-- 导航页面 -->
      <MusicNavBar />
      <!-- 推荐 -->
      <MusicRecomenSongs :songs="songs" />
      <!-- 在线 -->
      <MusicRecomenMusic :music="music" />
      <!-- 榜单 -->
      <MusicRecomenRankin :top="top" />
      <HomeBottom></HomeBottom>
      <!-- 脚本 -->
    </div>
  
    <!-- 底部导航 -->
    <MusicTabBar :actives="0" />
  </div>
</template>

<script>
import axios from "axios";

import HomeBottom from "../components/home/HomeBottom.vue";
import HomePage from "../components/home/HomePage.vue";
import MyShow from "../components/home/MyShow.vue";
import MusicLaoding from "@/components/common/laoding.vue";
import MusicSwiper from "@/components/home/swiper.vue";
import MusicNavBar from "@/components/home/nav_bar.vue";
import MusicRecomenSongs from "@/components/home/recomen_songs.vue";
import MusicRecomenRankin from "@/components/home/recomen_rankin.vue";
import MusicRecomenMusic from "@/components/home/recomen_music.vue";
import MusicTabBar from "@/components/Tab_bar/Tab_bar.vue";
import {
  GetbannerAPI,
  GetpersonalizedAPI,
  GettoplistlAPI,
  GetnewsongAPI,
} from "@/api/api.js";
export default {
  name: "MusicHome",
   inject:['reload'], 
 
  components: {
    HomeBottom,
    HomePage,
    MyShow,
    MusicLaoding,
    MusicTabBar,
    MusicSwiper,
    MusicRecomenSongs,
    MusicNavBar,
    MusicRecomenRankin,
    MusicRecomenMusic,
  },
  inheritAttrs: true,
  data() {
    return {
      banners: [],
      songs: [],
      top: [],
      music: [],
      laoding: true,
    };
  },
  mounted() {

    
    axios
      .all([
        GetbannerAPI({}),
        GetpersonalizedAPI({ limit: 12 }),
        GettoplistlAPI({}),
        GetnewsongAPI({ limit: 6 }),
      ])
      .then(
        axios.spread((banner, songs, top, music) => {
          this.banners = banner.data.banners;
          this.songs = songs.data.result;
          this.top = top.data.list;
          this.music = music.data.result;
          if (music.status == 200) {
            this.laoding = false;
          }
        })
      );
    this.$store.commit("SET_HIGHLY", true);
  },
  destroyed() {
    this.$store.commit("SET_HIGHLY", false);
  },
  computed: {},
  methods: {},
  
};
</script>

<style lang="less">
.home /deep/ { .box.van-row { .van-ellipsis.textover{color: #222 !important;}}}
</style>